<template>
  <van-field
    v-model="fieldValue"
    :name="params.value"
    :label="params.label"
    input-align="right"
    :placeholder="params.placeholder || '请选择'"
    v-bind="{ ...params.bind }"
    is-link
    readonly
    @click="!params.refuseEvent && (show = true)"
  />
  <van-popup v-model:show="show" closeable round position="bottom">
    <div class="message-pop">
      <div class="title">{{ params.title || params.label }}</div>
      <div class="content">
        <div v-for="(item, idx) in params.columns" :key="idx" class="item">
          <div>{{ item.label }}</div>
          <van-switch v-model="list[item.value]" @change="changeSwitch" />
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'

const show = ref(false)

const props = defineProps(['params', 'modelValue', 'formParams'])

const list = ref(props.modelValue)
const fieldValue = ref('')

const emits = defineEmits(['update:modelValue', 'validate'])

const initField = () => {
  const columns = props.params.columns
  let x = {}
  columns.forEach(item => {
    x[item.value] = item.label
  })
  const arr = []
  for (let i in list.value) {
    if (list.value[i]) {
      arr.push(x[i])
    }
  }
  fieldValue.value = arr.join(',')
}
const changeSwitch = () => {
  initField()
  emits('update:modelValue', list.value)
}

onMounted(() => {
  initField()
})
watch(
  () => props.modelValue,
  () => {
    initField()
  },
  {
    deep: true,
  },
)
</script>
<style lang="less" scoped>
.message-pop {
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  .title {
    width: 100%;
    text-align: center;
  }
  .content {
    margin-top: 20px;
    .item {
      display: flex;
      justify-content: space-between;
      padding: 20px 0;
      border-top: 1px solid #eee;
    }
  }
}
</style>
